import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { Spin, Icon } from 'antd';
import moment from 'moment';
import router from 'umi/router';
import EditPage from '@/components/EditPage';
import DetailPage from '@/components/DetailPage';
import FileReader from '@/components/FileReader';
import ExportOSInfo from './ExportOSInfo';
import { formItemFragement, queryDict, formatPrice } from '@/utils/common';
import { allDictList } from '@/utils/constans';
import {
  renderTableAdSelect,
  renderTableAdSearch,
  allDispatchType,
  allUrl,
  statusList,
  routeUrl,
} from './utils';

@connect(({ exportOS, component, loading }) => ({
  exportOSDetail: exportOS.exportOSDetail,
  dictObject: component.dictObject,
  searchValue: component.searchValue,
  loading: loading.effects[allDispatchType.detail],
}))
export default class ExportOSDetail extends Component {
  state = {
    detailId: '',
  };

  componentDidMount() {
    const { id } = this.props;
    this.handleStateChange([{ detailId: id }]);
    this.selectExportOSDetail(id);
  }

  componentWillMount() {
    // const allDict = [allDictList.papersType];
    // queryDict({ props: this.props, allDict });
  }

  componentWillReceiveProps(nextProps) {
    const { id } = nextProps;
    if (this.props.id !== id) {
      this.handleStateChange([{ detailId: id }]);
      this.selectExportOSDetail(id);
    }
  }

  selectExportOSDetail = id => {
    const { dispatch } = this.props;
    dispatch({
      type: allDispatchType.detail,
      payload: { id },
    });
  };

  handleStateChange = (options = []) => {
    options.map(item => {
      this.setState(item);
    });
  };

  openTrail = (e, id) => {
    const { closeDetail } = this.props;
    closeDetail([{ visible: false }]);
    router.push({
      pathname: `${routeUrl.trail}`,
      query: {
        orderNos: id,
      },
    });
  };

  render() {
    const { loading, exportOSDetail } = this.props;
    const { detailId } = this.state;
    const detail = exportOSDetail[detailId] || {};
    const editPageParams = {
      panelValue: [{ key: '基础信息' }, { key: '货物资料' }],
    };

    const formItem = [
      [
        <DetailPage label="订单编号" value={detail.orderNumber} />,
        <DetailPage label="系统单号" value={detail.ocsOrderNo} />,
      ],
      [
        // <DetailPage
        //   label="轨迹"
        //   value={
        //     <a title={'查看轨迹'} onClick={e => this.openTrail(e, detail.orderNumber)}>
        //       <Icon type="environment" />
        //     </a>
        //   }
        // />,
        <DetailPage label="结算编号" value={detail.chargeCode} />,
        <DetailPage
          label="状态"
          value={renderTableAdSelect({
            props: this.props,
            value: detail.status ? detail.status.toString() : '0',
            data: statusList,
          })}
        />,
      ],
      [
        <DetailPage label="发货人" value={detail.customerName} />,
        <DetailPage label="收货人" value={detail.consigneeName} />,
      ],
      [
        <DetailPage label="业务类型" value={detail.businessType} />,
        <DetailPage label="委托方" value={detail.consignorName} />,
      ],
      [
        <DetailPage label="吨车/货柜尺寸" value={detail.truckType} />,
        <DetailPage label="贸易条款" value={detail.incoterm} />,
      ],
      [
        <DetailPage label="发货联络人" value={detail.contactPerson} />,
        <DetailPage label="发货联络号码" value={detail.contactNumber} />,
      ],
      [
        <DetailPage label="收货联络人" value={detail.deliveryContactPerson} />,
        <DetailPage label="收货联络号码" value={detail.deliveryContactNumber} />,
      ],
      [
        <DetailPage label="需要报关服务" value={detail.isCustomDeclaration ? '是' : '否'} />,
        <DetailPage label="需要出口买单" value={detail.isExportBillsPurchase ? '是' : '否'} />,
      ],
      [
        <DetailPage label="下单时间" value={detail.orderDateTime} />,
        <DetailPage label="提货时间" value={detail.pickupDateTime} />,
      ],
      [
        <DetailPage label="驳回人" value={detail.rejectBy} />,
        <DetailPage label="驳回时间" value={detail.rejectTime} />,
      ],
      [
        <DetailPage label="驳回次数" value={detail.rejectCount} />,
        <DetailPage label="驳回原因" value={detail.rejectReason} />,
      ],
      //   [<DetailPage label="结算编号" value={detail.chargeCode} />, <></>],
      [
        <DetailPage label="发货城市" value={detail.pickupCity} />,
        <DetailPage label="发货详细地址" value={detail.pickupDetailAddress} />,
      ],
      [
        <DetailPage label="收货城市" value={detail.deliveryCity} />,
        <DetailPage label="收货详细地址" value={detail.deliveryDetailAddress} />,
      ],
      [<DetailPage label="备注" value={detail.remarks} />],
      [
        <DetailPage
          label="附件"
          value={
            <FileReader
              value={detail.files || []}
              showUploadList={{ showPreviewIcon: true, showRemoveIcon: false }}
              showUpload={false}
              urlType="tms"
            />
          }
        />,
      ],
    ];

    return (
      <EditPage {...editPageParams}>
        <Spin spinning={loading}>{formItemFragement(formItem)}</Spin>
        <Fragment>
          <ExportOSInfo detailId={detailId} onlyRead={true} mode="detail" disabled={true} />
        </Fragment>
      </EditPage>
    );
  }
}
